/*
 * @Description: 
 * @Author: Zhang Zhangda
 * @Date: 2021-03-03 19:37:47
 * @LastEditTime: 2021-03-08 14:39:00
 * @LastEditors: Zhang Zhaoda
 */
import excalList from "./excallist.less";
import { Table, Tag, Space, Button, Form, Input } from 'antd';
import { PlusOutlined } from "@ant-design/icons"
import { useSelector,useDispatch } from "react-redux";
import { FC, useState } from "react";
import { ExcalModelState } from "umi";
//引入id生成
// import idCreator  from "@/utiles/Md5"
//引入对话框
import Modals from "../components/Modals"
const columns = [
  {
    title: '类型Id',
    dataIndex: 'questions_type_id',
    key: 'questions_type_text',
    // render: (text:any) => <a>{text}</a>,
  },
  {
    title: '类型名称',
    dataIndex: 'questions_type_text',
    key: 'questions_type_text',
  },
  {
    title: '操作',
    key: '1'
  }

];


interface Istore {
  excal: ExcalModelState
}
const ExcalList: FC = () => {
  let { QuestionsType } = useSelector(({ excal }: Istore) => excal);
  let dispatch=useDispatch()

  const [isModalVisible, setIsModalVisible] = useState(false);

  //对话框
  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  // form表单
  const layout = {
    labelCol: { span: 16 },
    wrapperCol: { span: 16, offset: 4 },
  };

  const onFinish = (values: any) => {
    let sort=(new Date().getTime()+'').slice(-5)
    // 触发dispatch
    dispatch({
      type:'excal/addQuextionsType',
      payload:{sort,text:values.typename}
      
    })
    handleCancel()
  };


  return (
    <div className={excalList.excallist}>
      <Button
        style={{ marginBottom: '20px', borderRadius: '3px' }}
        type="primary"
        icon={<PlusOutlined />}
        onClick={showModal}>
        添加类型
    </Button>
      <Table 
        columns={columns} 
        dataSource={QuestionsType} 
        pagination={{defaultCurrent:1,defaultPageSize:7}}
        rowKey={(record)=>record.questions_type_sort}
        />
      
      {/* 显示对话框 */}
      <Modals
        isModalVisible={isModalVisible}
        handleCancel={handleCancel}
        title={'创建新类型'}
      >
        <Form
          {...layout}
          onFinish={onFinish}
        >
          <Form.Item
            name="typename"
            rules={[{ required: true, message: '请输入类型' }]}
          >
            <div className={excalList.iptbox}>
              <Input placeholder="请输入类型名称" bordered={false} />
            </div>
          </Form.Item>
          <div className={excalList.button}>
            <Form.Item >
              <Button htmlType="submit" type="primary" style={{ marginRight: '20px', width: '80px' }} >
                确定
              </Button>
              <Button>
                取消
              </Button>

            </Form.Item>
          </div>


        </Form>
      </Modals>
    </div>
  );
}

export default ExcalList